<!--
// 
// VersionCell.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/02.
// 
-->
<template>
    <div class="VersionCell">
        <div class="version-number">V{{ item.versionNum }}
            <el-button class="action" link style="margin-left: 40px" type="primary" @click="emits('download', item)">下载</el-button>
        </div>
        <div class="version-time">发布时间：{{ filters.dateTime(item.createdTime) }}</div>
        <div v-if="item.updatedTime" class="version-time">修改时间：{{ filters.dateTime(item.updatedTime) }}</div>
        <div v-if="item.description" class="log-content" v-html="description(item.description)"></div>
        <div v-else class="log-content">暂无版本信息</div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    item: {
        type: Object,
        default: () => {
        }
    }
});
const emits = defineEmits(["download"]);

// 路由
const router = useRouter();
// store
const store = useStore();

// 当前页面功能权限
const permission = {
    delete: "Version:DeleteVersionInfo",
    edit: "Version:UpdateVersionInfo",
    versionFile: "VersionFile"
};

/**
 * 格式化 description
 * @param text
 * @returns {*|string}
 */
function description(text) {
    if (!text) return "";
    if (text.indexOf("<p>") > -1) return text;
    if (text.indexOf("\n") > -1) {
        const textList = text.split("\n");
        return textList.map(item =>  `<p>${item}</p>`).join("");
    }
}

const filters = {
    dateTime(val, format = "YYYY-MM-DD HH:mm:ss") {
        if (!val) return "";
        return $dayjs(val).format(format)
    }
}

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.VersionCell {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;

    .version-number {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 4px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .version-time {
        font-size: 14px;
        color: grey;
        line-height: 26px;
    }

    .download-actions {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;

        .action {
            margin-bottom: 20px;
            margin-left: unset;
            width: 200px;
            height: 40px;
            font-size: 14px;
        }
    }

    .log-content {
        width: 100%;
        background: #f1f1f1;
        padding: 10px 20px;
        box-sizing: border-box;
        border-radius: 6px;
        min-height: 100px;


        img {
            max-width: 60%;
        }
    }

}
</style>

<style lang="scss">
.version-log-list {
    img {
        max-width: 50%;
    }
}
</style>